<template>
  <div class="register">

    <h1 style="text-align: center">佳发同城商户平台系统</h1>

    <el-row type="flex" justify="center">
      <el-col style="width: 460px;padding-top: 10px">
        <el-form :model="registerData" :rules="rRule" ref="registerData" class="demo-ruleForm" label-width="120px">
          <el-form-item prop="userName" label="商家名称：">
            <el-input size="medium" v-model="registerData.userName" placeholder="输入商家名称" required></el-input>
          </el-form-item>
          <el-form-item prop="legalPerson" label="法人姓名：">
            <el-input size="medium" v-model="registerData.legalPerson" placeholder="输入法人姓名" required></el-input>
          </el-form-item>
          <el-form-item prop="legalPhone" label="法人电话：">
            <el-input size="medium" type="number" v-model="registerData.legalPhone" placeholder="输入法人电话号码" required></el-input>
          </el-form-item>
          <el-form-item prop="userAddress" label="商家所在地：">
            <el-input size="medium" v-model="registerData.userAddress" placeholder="输入住所所在地" required></el-input>
          </el-form-item>
          <el-form-item prop="creditCode" label="统一信用代码：">
            <el-input size="medium" v-model="registerData.creditCode" placeholder="输入统一信用代码" required></el-input>
          </el-form-item>
          <el-form-item prop="companyInfo" label="公司简介：">
            <el-input size="medium" v-model="registerData.companyInfo" placeholder="输入公司简介" required></el-input>
          </el-form-item>
          <el-form-item prop="userAccount" label="账号设置：">
            <el-input size="medium" v-model="registerData.userAccount" placeholder="账号由字母与数字组成" required></el-input>
          </el-form-item>

          <el-form-item label="法人身份证:" prop="legalIdentity">
            <el-upload
              action="https://business.cqjftc.com/jfBusiness/pic/upload"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-success="handleAvatarSuccess"
              :limit="2"
              :on-exceed="handleExceed"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>

          <el-form-item label="申请人身份证:" prop="userIdentity">
            <el-upload
              action="https://business.cqjftc.com/jfBusiness/pic/upload"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-success="handleAvatarSuccess1"
              :limit="2"
              :on-exceed="handleExceed"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>

          <el-form-item label="营业执照：" prop="userLicense">
            <el-upload
              v-model="registerData.userLicense"
              class="avatar-uploader"
              action="https://business.cqjftc.com/jfBusiness/pic/upload"
              :show-file-list="false"
              accept="image/*"
              :on-success="handleAvatarSuccess2"
              :before-upload="beforezhaopianUpload">
              <img v-if="registerData.userLicense" :src="registerData.userLicense" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <el-form-item label="法人委托书：" prop="entrustBook">
            <el-upload
              v-model="registerData.entrustBook"
              class="avatar-uploader"
              action="https://business.cqjftc.com/jfBusiness/pic/upload"
              :show-file-list="false"
              accept="image/*"
              :on-success="handleAvatarSuccess3"
              :before-upload="beforezhaopianUpload">
              <img v-if="registerData.entrustBook" :src="registerData.entrustBook" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <el-form-item label="其他证明:">
            <el-upload
              action="https://business.cqjftc.com/jfBusiness/pic/upload"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-success="handleAvatarSuccess4"
              :limit="10"
              :on-exceed="handleExceed1"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>

          <el-form-item label="上传logo：">
            <el-upload
              v-model="registerData.userPic"
              class="avatar-uploader"
              action="https://business.cqjftc.com/jfBusiness/pic/upload"
              :show-file-list="false"
              accept="image/*"
              :on-success="handleAvatarSuccess5"
              :before-upload="beforezhaopianUpload">
              <img v-if="registerData.userPic" :src="registerData.userPic" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <el-form-item prop="userPhone" label="联系方式：">
            <el-input size="medium" type="number" v-model="registerData.userPhone" placeholder="输入联系方式" required></el-input>
          </el-form-item>

          <el-form-item prop="code" label="验证码：">
            <el-input v-model="registerData.code" type="number" size="medium" placeholder="输入验证码" required>
              <el-button @click="sendCode()" slot="append" :disabled="disabled" class="btns">{{btnTxt}}</el-button>
            </el-input>
          </el-form-item>

          <el-form-item prop="userPhone" label="登录密码：">
            <el-input size="medium" v-model="registerData.userPassword" placeholder="密码由字母与数字组成" required></el-input>
          </el-form-item>

          <el-form-item label-width="50px">
            <el-checkbox v-model="checked">我已阅读并同意《用户服务协议》</el-checkbox>
          </el-form-item>

          <el-form-item label-width="50px">
            <el-button @click="submitForm('registerData')" size="medium" style="width: 90%;" type="primary">提交审核
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <template><span v-loading.fullscreen.lock="fullScreenLoading"></span></template>
  </div>


</template>

<script>
  export default {
    name: "Register",
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        time: 0,
        btnTxt: "发送验证码",
        fullScreenLoading: false,
        checked: true,
        registerData: {
          userName: '', // 商家名称
          legalPerson: '', // 法人姓名
          legalPhone: '', // 法人电话
          userAddress: '', // 商家所在地
          creditCode: '', // 统一信用代码
          companyInfo: '', // 公司简介
          userAccount: '', // 账号设置
          legalIdentity: [], // 法人身份证
          userIdentity: [], // 申请人身份证
          userLicense: '', // 营业执照
          entrustBook: '', // 法人委托书
          otherProof: [], // 其他证明
          userPic: '', // 商家logo
          userPhone: '', // 联系方式
          code: '', // 验证码
          userPassword: '', // 登录密码
        },
        rRule: {
          userName: {required: true, message: '请输入商家名称', trigger: 'blur'},
          legalPerson: {required: true, message: '请输入法人姓名', trigger: 'blur'},
          legalPhone: {required: true, message: '请输入法人电话', trigger: 'blur'},
          userAddress: {required: true, message: '请输入地址', trigger: 'blur'},
          creditCode: {required: true, message: '请输入统一信用代码', trigger: 'blur'},
          companyInfo: {required: true, message: '请输入公司简介', trigger: 'blur'},
          userAccount: {required: true, message: '请输入账号设置', trigger: 'blur'},
          legalIdentity: {required: true, message: '请上传法人身份证', trigger: 'blur'},
          userIdentity: {required: true, message: '请上传申请人身份证正反面', trigger: 'blur'},
          userLicense: {required: true, message: '请上传营业执照', trigger: 'blur'},
          entrustBook: {required: true, message: '请上传法人委托书', trigger: 'blur'},
          userPhone: {required: true, message: '请输入手机号', trigger: 'blur'},
          code: {required: true, message: '请输入验证码', trigger: 'blur'},
          userPassword: {required: true, message: '请输入登录密码', trigger: 'blur'},
        },
      }
    },
    methods: {
      //获取验证码
      sendCode() {
        let thi = this
        var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
        if (thi.registerData.userPhone === '') {
          thi.$message('请输入手机号');
        } else if (!reg.test(thi.registerData.userPhone)) {
          console.log(thi.registerData.userPhone)
          thi.$message('手机号格式不对');
        } else {
          thi.time = 60;
          thi.disabled = true;
          thi.timer();
          thi.fullScreenLoading = true
          console.log(thi.registerData.userPhone)
          var userPhone = '' + thi.registerData.userPhone + ''
          thi.$http.post(global.posturl.host + global.posturl.getBsCode, {
            userPhone: userPhone
          }).then(function (response) {
            thi.fullScreenLoading = false
            console.log(response)
            var qmsg = response.data.msg
            var qcode = response.data.code
            if (qcode === 200) {
              thi.$message({
                message: '发送验证码成功',
                type: 'success',
                duration: 5000
              });
              thi.gohref('index')
            } else {
              thi.$message({
                message: qmsg,
                type: 'error',
                duration: 5000
              });
            }
          }).catch(function (error) {
            console.log(error)
            console.log('123')
          });
        }
      },

      // 发送验证码倒计时
      timer() {
        if (this.time > 0) {
          this.time--;
          this.btnTxt = this.time + "s后重新获取";
          setTimeout(this.timer, 1000);
        } else {
          this.time = 0;
          this.btnTxt = "发送验证码";
          this.disabled = false;
        }
      },

      //商家注册
      submitForm(formName) {
        let thi = this
        console.log(thi.registerData)
        thi.$refs[formName].validate((valid) => {
          if (valid) {
            var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
            var hz = /^[\u4e00-\u9fa5]+$/;
            if (!reg.test(thi.registerData.legalPhone)) {
              thi.$message('法人手机号格式不对');
              return
            }
            if (hz.test(thi.registerData.userPassword)) {
              thi.$message('密码不能输入汉字');
              return
            }
            if(thi.checked===false){
              thi.$message('请阅读并同意《用户服务协议》');
              return
            }
            if (hz.test(thi.registerData.userAccount)) {
              thi.$message('账号不能输入汉字');
              return
            }
            if(typeof(thi.registerData.legalIdentity)==="object"){
              thi.registerData.legalIdentity = thi.registerData.legalIdentity.join(',')
            }
            if(typeof(thi.registerData.userIdentity)==="object"){
              thi.registerData.userIdentity = thi.registerData.userIdentity.join(',')
            }
            if(typeof(thi.registerData.otherProof)==="object"){
              thi.registerData.otherProof = thi.registerData.otherProof.join(',')
            }
            console.log(thi.registerData)
            thi.fullScreenLoading = true
            this.$http.post(global.posturl.host + global.posturl.jfBsBusinessRegister,
              thi.registerData
            ).then(function (response) {
              console.log(response.data)
              var qCode = response.data.code
              var qMsg = response.data.msg
              var qData = response.data.data
              thi.fullScreenLoading = false
              if (qCode === 200 || qCode === 201) {
                thi.$message({
                  message: '提交审核成功',
                  type: 'success',
                });
                thi.$router.push({name: 'login'})
              }else {
                thi.$message({
                  message: qMsg,
                  type: 'error',
                  duration: 5000
                });
              }
            }).catch(function (error) {
              console.log(error)
              console.log('123')
            });
          }
        });
      },

      // 上传文件之前的钩子
      beforezhaopianUpload(file) {
        const isJPEG = file.type === 'image/jpeg';
        const isJPG = file.type === 'image/jpg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 10;
        var isIMG = true
        this.fullScreenLoading = true
        if (!isJPG && !isJPEG && !isPNG) {
          this.fullScreenLoading = false
          this.$message.error('请上传jpeg/png/jpg格式的图片');
          isIMG = false
        }
        if (!isLt2M) {
          this.fullScreenLoading = false
          this.$message.error('上传头像图片大小不能超过 10MB!');
        }
        return isIMG && isLt2M;
      },
      // 点击文件列表中已上传的文件时的钩子
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      // 文件列表移除文件时的钩子
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      // 文件超出个数限制时的钩子
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 2 个文件 `);
      },
      // 文件超出个数限制时的钩子---其他证明
      handleExceed1(files, fileList) {
        this.$message.warning(`当前限制选择 10 个文件 `);
      },
      // 文件上传成功时的钩子---法人身份证
      handleAvatarSuccess(res, fileList) {
        console.log(res)
        this.registerData.legalIdentity.push(res.url)
        console.log(this.registerData.legalIdentity)
        this.fullScreenLoading = false
      },
      // 文件上传成功时的钩子---申请人身份证
      handleAvatarSuccess1(res, fileList) {
        console.log(res)
        this.registerData.userIdentity.push(res.url)
        console.log(this.registerData.userIdentity)
        this.fullScreenLoading = false
      },
      // 文件上传成功时的钩子---营业执照
      handleAvatarSuccess2(res, file) {
        console.log(res)
        this.registerData.userLicense = res.url
        this.fullScreenLoading = false
      },
      // 文件上传成功时的钩子---法人委托书
      handleAvatarSuccess3(res, file) {
        console.log(res)
        this.registerData.entrustBook = res.url
        this.fullScreenLoading = false
      },
      // 文件上传成功时的钩子---其他证明
      handleAvatarSuccess4(res, file) {
        console.log(res)
        this.registerData.otherProof.push(res.url)
        this.fullScreenLoading = false
      },
      // 文件上传成功时的钩子---上传logo
      handleAvatarSuccess5(res, file) {
        console.log(res)
        this.registerData.userPic = res.url
        this.fullScreenLoading = false
      },

    }
  }
</script>

<style scoped>
  .register {
    text-align: left;
  }

  .avatar-uploader {
    width: 148px;
    height: 148px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }

  .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }


</style>
